<template>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  :append-to-body="false"
	  width="550px"
	  class="editor-dialog-c"
	  @close="resetForm"
	  draggable
	  :close-on-click-modal="false"
	>
      <el-form
        ref="formRef"
        :model="formData"
        label-width="100px"
      >
        <el-form-item :label="currentPort.name" prop="value">
			<el-input v-model="formData.value" style="width: 240px" :placeholder="currentPort.name" />
<!--          <el-select
            v-model="formData.value"
            placeholder="请选择数据源"
            style="width: 100%"
          >
            <el-option
              v-for="ds in datasources"
              :key="ds.id"
              :label="ds.name"
              :value="ds.id"
            />
          </el-select> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ElMessage } from 'element-plus'
	import type { WorkflowNode as FlowNode,Port} from '@/stores/workflow';
	import DataSourceAPI from '@/api/biz/datasource';
	import { onMounted } from 'vue';
	import { useWorkflowStore } from '@/stores/workflow';
	
	const workflowStore = useWorkflowStore();
	const dialog = ref<any>({
		visible:false,
		title:'选择数据源',
	});
	const formRef=ref();
	const formData=ref<any>({
		value: '',
		portId: '',
		name: ''
	})
	const datasources = ref<Array<{id: string, name: string}>>([]);
	const currentNode = ref<FlowNode | null>(null);
	const currentPort = ref<any>(null);
	
	// 获取数据源列表
	const getDatasources = async () => {
	  try {
	    const data = await DataSourceAPI.options({});
	    datasources.value = data.map((item:any) => ({
	      id: item.id,
	      name: item.name
	    }));
	  } catch (error) {
	    ElMessage.error('获取数据源列表失败');
	  }
	};
	
	const openDialog=(portId:string,port:Port,node?:FlowNode)=>{
		dialog.value.visible = true;
		formData.value.portId=portId;
		currentNode.value = node || null;
		
		currentPort.value=port;
		console.log(currentPort.value);
		
		// 找到当前端口
		// if (node) {
		// 	currentPort.value = node.data.inputs.find(input => 
		// 		`input-${node.id}-${input.id}-port` === portId
		// 	);
			
		// 	// 如果端口已有值，预设选中
		// 	if (currentPort.value?.value) {
		// 		formData.value.value = currentPort.value.value;
		// 		const ds = datasources.value.find(d => d.id === currentPort.value.value);
		// 		formData.value.name = ds?.name || '';
		// 	}
		// }
		
		// getDatasources();
	}	
	
	const emits = defineEmits(['success', 'cancel'])
	const handleConfirm = () => {
		if (!formData.value.value) {
			ElMessage.warning('请选择数据源');
			return;
		}
		// const selectedDs = datasources.value.find(ds => ds.id === formData.value.value);
		// formData.value.name = selectedDs?.name || '';
		
		// 更新端口值
		if (currentPort.value) {
			currentPort.value.value = formData.value.value;
			workflowStore.incrementVersion();
		}
		
		emits('success', formData.value.portId, formData.value.value, formData.value.name);
		dialog.value.visible = false;
		resetForm();
	}
	
	function resetForm() {
		formData.value.value = '';
		formData.value.name = '';
		// currentNode.value = null;
		// currentPort.value = null;
	}
	defineExpose({
	  openDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
.dialog-footer {
	text-align: right;
	margin-top: 20px;
}

:deep(.el-select) {
	width: 100%;
}
</style>